<!--
 * @Description: 我要报修
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 宋佳馨 song2005315@qq.com
 * @LastEditTime: 2025-10-09 09:14:02
-->
<template>
  <div class="container">
    <div class="form-item">
      <label>工程设备</label>
      <el-cascader :options="deviceOptions"
        :props="{ label: 'name', value: 'id', children: 'children' }" placeholder="请选择工程设备" @change="handleChange"
        style="width: 100%;"></el-cascader>
    </div>
    <div class="form-item">
      <label>报修原因</label>
      <el-input v-model="form.bill_why" placeholder="请输入报修原因" style="width: 100%;"></el-input>
    </div>
    <div class="submit-btn">
      <el-button type="success" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'

export default {
  data() {
    return {
      form: {},
      deviceOptions: []
    };
  },
  created() {
    this.getDeviceTree();
  },
  methods: {
    handleChange(value) {
      this.form.engineer_id = value[0];
      this.form.device_id = value[1];
    },


    async getDeviceTree() {
      const res = await get('/engineer/findEngineerDeviceTree');
      this.deviceOptions = res.data;
    },
    async handleSubmit() {
      try {
        await post('/workorder/repairOrder',this.form);

        this.$router.push('/am/order/List'); // 跳转至工单列表页
      } catch (error) {
        console.error('报修提交失败', error);
      }
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.form-item {
  display: flex;
  flex-direction: column;
}

.form-item label {
  margin-bottom: 8px;
  font-weight: bold;
}

.submit-btn {
  margin-top: 10px;
}
.el-cascader, .el-input{
  width: 300px
  !important
}
</style>